<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{article.title}}</block>
		</cu-custom>
		<view v-if="isInit">			
			
			<!-- 内容 begin -->
			<view class="cu-card case">
				<view class="cu-item shadow">	
					<view class="padding-sm text-lg text-bold">{{article.title}}</view>
					<!-- 地图 begin -->
					<view class="image">
						<image style="padding: 3%;padding-bottom: 0%;" v-if="article.images==null||article.images.length==0" :src="article.img" mode="widthFix" class="radius"></image>
						<swiper v-else class="padding-lr-sm screen-swiper square-dot" :indicator-dots="true" :circular="true"
						 :autoplay="true" interval="5000" duration="500">
							<swiper-item v-for="(item,index) in article.images" :key="index">
								<image :src="item.url" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</view>
					<!-- 地图 end -->
					
					<view class="solid-top text-content text-lg margin-sm" style="line-height: 200%;">						
						<rich-text :nodes="article.content"></rich-text>
					</view>
					
				</view>
			</view>
			<!-- 内容 end -->
			
			<backTop :scrollTop="scrollTop" bottom="60px"></backTop>
			
		</view>		
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import * as util from "@/common/util.js"
	import backTop from '@/components/back-top/back-top.vue';
	
	export default {
		components:{
			backTop
		},
		data() {
			return {
				id:-1,
				article:{},
				scrollTop: 0,
				isInit:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			//更新类型时返回
			if(option.id){
				this.id=option.id
			}
			this.$api.post('/scenery/article',{id:this.id}).then(res => {
				this.article=res.data
				if(this.article.images!=""&&this.article.images!=null){
					this.article.images=JSON.parse(this.article.images)
				}
				setTimeout(()=>this.isInit=true,500)
			}).catch(error=>{
				uni.showToast({
					icon: 'none',
					title: '网络异常'
				})
			})
		},
		methods: {			
		}
	}
</script>

<style scoped>
	.img-radius{
		width: 210rpx !important;
		border:1px solid #f0f0f0!important;
		border-radius:5%!important;
		background-size:cover!important;
	}
</style>
